<template>
  <home-nav title="相关推荐" :more="false"/>
  <ul class="correlation" >
    <li v-for="mv in correlation" :key="mv.id" class="mb-2 flex">
      <div class="w-25 h-15 mr-2 relative cursor-pointer" @click="jumpMv(mv.id ?? mv.vid)">
        <img class="w-25 h-15" :src="mv.cover ?? mv.coverUrl" alt="">
        <p class="mt-0 mb-0 absolute top-0 text-xs right-0 text-center flex items-center bg-opacity-25 bg-black w-full">
          <span class="i-mdi-video inline-block" />
          <span class="ml-1">{{filter(mv.playCount ?? mv.playTime, 2) }}</span>
        </p>
      </div>
      <div class="right flex flex-col justify-between">
        <p class="title">
          <span class="border-1 yu-titleColor text-xs mr-1">MV</span>
          <span class="yu-textColor-hover" @click="jumpMv(mv.id ?? mv.vid)">{{ mv.name ?? mv.title }}</span>
        </p>
        <p class="text-xs">{{ secondsToMinutes( (mv?.duration ? mv?.duration/1000 : mv?.duration ?? mv.durationms/1000)) }}</p>

        <p class="text-xs ">
          <span v-for="ar in mv.artists ?? mv.creator" :key="ar.id" @click="jumpArtist(ar.id ?? ar.userId)" class="mr-1 yu-textColor-hover">{{ ar.name ?? ar.userName }}</span>
        </p>
      </div>
    </li>
  </ul>
</template>

<script setup>
import { secondsToMinutes } from "@/utils/index";
import filter from '@/hooks/filter'
import {useRoute, useRouter} from "vue-router";
import {inject, watch} from "vue";
import HomeNav from '@/components/HomeNav/index.vue'
import {useStore} from "../../../store/index.js";

const router= useRouter()
const route = useRoute()
const store = useStore()
defineProps({
  correlation: {
    type: Array,
    default: []
  }
})

// 跳转mv
const jumpMv = (id) => {
  router.push({
    path: '/mv',
    query: {
      id
    }
  })
}
// 跳转到歌手
const jumpArtist = (id) => {
  router.push({
    path: store.currentInfo.type === 10 ? '/artist' : '/user',
    query: {
      id
    }
  })
}

const reload = inject('reloadPage')
// 使用watch监听路由变化，因为watch有惰性，不会造成一直刷新
watch(route, () => {
  reload()
})

</script>

<style scoped lang="scss">
.right {
  > p {
    margin: 0 0;
    display: -webkit-box;
    -webkit-box-orient: vertical; /*设置方向*/
    -webkit-line-clamp: 1; /*设置超过为省略号的行数*/
    overflow: hidden;
  }
}
</style>
